<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <!--当前示例页面样式表引用-->
    <link rel="stylesheet" href="./static/demo/openlayers/example/style.css" />
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-openlayers-local.js"></script>
    <script src="./static/data/kml/Earthquake_2012.js"></script>
    
    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 95%;
            position: absolute;
        }
        #layertree li > span {
            cursor: pointer;
            font-size: 6px;
        }
        #layertree ul{
            font-family: cursive;
            color:white;
            margin: 0px;
            padding-left: 20px;
        }
        fieldset{
            padding-left: 6px;
            padding-bottom: 5px;
            padding-right: 6px;
            border: none;
        }
      
        fieldset label {
            float:left;
            color: white;
            font-size: 6px;
            font-weight: 500;
            font-family: cursive;
            margin: 2px 2px;
            width: 70%;
        }
        fieldset input {
            float: left;
            margin-bottom:2px;
            width: 10%;
        }
        input[type="range"] {
        /*-webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;*/
            -webkit-appearance:none; /*去除默认样式*/
            background-color: #ebeff4;
            /*border-radius: 15px;*/
            width: 70px;
            -webkit-appearance: none;
            height:2px;
            padding: 0;
            border: none;
            margin-top: 10px
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;/*去除默认样式*/
            cursor: default;
            top: 0;
            height: 10px;
            width: 10px;
            transform: translateY(0px);
            /*background: none repeat scroll 0 0 #5891f5;*/
            background: #fff;
            border-radius: 5px;
            border: 2px solid #006eb3;
            /*-webkit-box-shadow: 0 -1px 1px #fc7701 inset;*/
        }
    </style>

    <script type="text/javascript">
        var map = null;
        var heatLayer = null;

        function init() {
            //初始化地图容器
            map = new ol.Map({
                target: 'mapCon',     //地图容器div的ID
                controls: ol.control.defaults({
                    attributionOptions: ({
                        collapsible: true
                    })
                }),
                view: new ol.View({
                    projection: 'EPSG:4326',
                    center: [80,30],  //地图初始中心点
                    maxZoom: 28,         //最大瓦片显示级数
                    minZoom: 1,          //最小瓦片显示级数
                    zoom: 3             //地图初始显示级数
                
                }),
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM({wrapX:false}),
                        opacity: 0.7
                    })
                ]
            }); 

            var blur = document.getElementById('blur');
            var radius = document.getElementById('radius');
            
            //添加监听'input'值变化
            blur.addEventListener('input', function() {
                heatLayer.setBlur(parseInt(blur.value, 10));
            });

            radius.addEventListener('input', function() {
                heatLayer.setRadius(parseInt(radius.value, 10));
            });
            
            heatLayer = createHeatmapLayer(eathquake.data,parseInt(blur.value, 10),parseInt(radius.value, 10));
            map.addLayer(heatLayer);
        
        }

        function createHeatmapLayer (data, blur, radius){
            var source = new ol.source.Vector({wrapX:false})
            var features = []
            for (var i in data) {
                var att = parseFloat(data[i].magnitude) ;
                for(var j in data[i].coordinates)
                {
                    var newFeature = createFeature([parseFloat(data[i].coordinates[j][0]),parseFloat(data[i].coordinates[j][1])],att);
                    features.push(newFeature)
                }
        
            }
            source.addFeatures(features)
            //创建热力图层
            var Heatmap = new ol.layer.Heatmap({
                source,
                blur,
                radius,
                weight:'weight'  //默认热力图层权值字段（0-1）
            });
            return Heatmap
        }

        function createFeature (coordinates,att) {
            var tFeature =new ol.Feature({
                geometry: new ol.geom["Point"](coordinates)
            });
            tFeature.set('weight', att - 5);
            return tFeature;
        }
    </script>
</head>

<body onload="init()">
    <div id="mapCon">
    </div>
    <fieldset id="layertree" style="position: absolute;width: 180px;top: 18px;left: 50px;background-color: black;opacity: 0.65;border-radius: 10px;padding: 10px 6px;">
        <ul>
            <li>
                <span>热力参数</span>
                <fieldset id="layer0">
                    <label style="width: 54px;line-height: 17px">半径:</label><input id="radius" type="range" min="1" max="50" step="1" value="10"/>
                </fieldset>
                <fieldset id="layer0">
                    <label style="width: 54px;line-height: 17px">模糊半径:</label><input id="blur" type="range" min="1" max="50" step="1" value="15"/>
                </fieldset>
            </li>
        </ul>
    </fieldset>
</body>

</html>